import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'

import cateModel from '../../models/cateModel'
import {
   CateList,
   Box
} from './style'

@withRouter
class Cate extends Component {

   state = {
      height: 'calc(100% - 2.7rem)',
      activeList: [],
      cateList: [],
      cateInfoList: []
   }

   // 点击事件
   activeFn = index => {
      let activeList = this.state.activeList.map(item => '')
      activeList[index] = 'active'

      let cateInfoList = this.state.cateList[index][1]
      this.setState({ activeList, cateInfoList })
   }


   async componentDidMount() {
      let height = document.documentElement.clientHeight - .51
      this.setState({
         height: height + 'rem'
      })

      let ret = await cateModel.getCate()      
      // 把对象转为数组
      let jsonObj = ret.data.data
      let jsonArr = Object.entries(jsonObj)

      let activeList = new Array(jsonArr.length).fill('')
      activeList[0] = 'active'

      let cateInfoList = jsonArr[0][1]
      // console.log(activeList,cateInfoList,jsonArr)
      this.setState({
         cateList: jsonArr,
         activeList,
         cateInfoList
      })
   }
   render() {
      let height = this.state.height
      return (
         <>
            <Box>
                    <div>
                        <img src='https://tn1-f2.kkmh.com/image/180118/j64poq2kc.webp-t.w750.jpg.h.p' alt="" />
                    </div>
                </Box>
         <CateList>

            <div>
               <ul>
                  {
                     this.state.cateList.length === 0 ? <div>加载中</div> : (
                        <>
                           {
                              this.state.cateList.map((item, index) => (
                                 <li key={item[0]} onClick={this.activeFn.bind(this, index)} className={this.state.activeList[index]}><span>{item[0]}</span></li>
                              ))
                           }
                        </>
                     )
                  }

               </ul>
            </div >
            <div className="one">
               <div className="onebox">
                  {
                     this.state.cateInfoList.map(item => (
                        <div className="onebox1" key={item.id} onClick={this.goDetail.bind(this,item.id)}>
                           <div className="one1">
                              <img src={item.image_url} alt="" />
                           </div>
                           <div className="right">
                              <h4>{item.title}</h4>
                              <span className='hid'>{item.description}!</span>
                              <div className="one2">
                                 <p>{item.category[0]}</p>
                              </div>
                              <i>{item.rank_message}</i>
                           </div>
                        </div>
                     ))
                  }
               </div>
         

            </div>
         </CateList>
         </>
      );
   }
   goDetail(id){
      this.props.history.push('/Detail/'+ id)
   }
}

export default Cate;
